<template>
	<view class="applicationStatus">
		<view class="item" v-for="(item,index) in getInfo.list" :key="index">
			<view class="user">
				<image :src="item.avatar" mode=""></image>
				<view><view class="name">{{item.type==1||item.type==0?item.createUser:item.userType?'店长':'平台'}}</view><view class="time">{{item.createTime}}</view></view>
			</view>
			<view class="tips">{{item.tips}}</view>
			<view class="supplement" v-if="item.type==1||item.type==3">
				{{item.type==1?`考试结果：${item.results}分`:`原因：${item.reason}`}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, onMounted, ref } from 'vue'
	import api from '@/api';
	// import { useUserStoreToRefs } from '@/store/useUserStore'
	// const { userInfo } = useUserStoreToRefs()
	onLoad((option) => {
		getInfo.examRecordId = option.id
	})
	
	onMounted(async() => {
		await getInfo.getList()
	})
	const typeText = (status:number)=>{
		// 操作类型（0-开始考试，1-结束考试，2-批阅试卷-批阅通过，3-批阅试卷-批阅未通过 4 考试通过-发放考试证书）
		if(status==0){
			return '开始考试'
		}else if(status==1){
			return '结束考试'
		}else if(status==2){
			return '批阅通过'
		}else if(status==3){
			return '批阅未通过'
		}else if(status==4){
			return '发放考试证书'
		}else{
			return '收回考试证书'
		}
	}
	const tipsText = (status:number)=>{
		// 操作类型（0-开始考试，1-结束考试，2-批阅试卷-批阅通过，3-批阅试卷-批阅未通过 4 考试通过-发放考试证书）
		if(status==0){
			return '用户开始考试'
		}else if(status==1){
			return '用户结束考试'
		}else if(status==2){
			return '店长批阅通过'
		}else if(status==3){
			return '店长批阅未通过'
		}else if(status==4){
			return '考试通过发放考试证书'
		}else{
			return '批阅未通过，收回考试证书'
		}
	}
	const getInfo = reactive<any>({
		examRecordId:'',
		list:[],
		getList: async()=>{
			const res:any = await api({
			   method: 'get',
			   url: `/mall/exam/exam-log/getProgress`,
			   data: {
					examRecordId:getInfo.examRecordId,
			   }
			})
			getInfo.list = res.data
			getInfo.list.forEach(item=>{
				item.text = typeText(item.type)
				item.tips = tipsText(item.type)
			})
		}
	})
</script>
<style>
	page{
		background-color: #F9F6F6;
	}
</style>
<style lang="scss" scoped>
.applicationStatus{
	padding: 32rpx;
	box-sizing: border-box;
}
.item{
	width: 100%;
	border-radius: 24rpx;
	padding: 32rpx;
	box-sizing: border-box;
	background-color: #fff;
	margin-bottom: 24rpx;
	.user{
		@include flex(center,space-between);
		margin-bottom: 24rpx;
		image{
			width: 96rpx;
			height: 96rpx;
		}
		>view{
			width: calc(100% - 122rpx);
			.name{
				color: #1B2120;
				font-weight: bold;
				font-size: 28rpx;
			}
			.time{
				color: #5C5E5E;
				font-size: 24rpx;
				margin-top: 16rpx;
			}
		}
	}
	.tips{
		color: #1B2120;
		font-weight: bold;
		font-size: 28rpx;
	}
	.supplement{
		color: #5C5E5E;
		font-size: 24rpx;
		margin-top: 16rpx;
	}
}
</style>